<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            background-color: #f5f5f5;
        }
        .sidebar {
            background-color: #ff5000;
            color: white;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 250px;
            min-height: 100vh;
        }
        .sidebar h1 {
            margin: 0 0 20px 0;
        }
        .menu {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
        }
        .menu a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s;
            width: 100%;
            box-sizing: border-box;
        }
        .menu a:hover {
            background-color: #e04a00;
        }
        .content {
            flex-grow: 1;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin: 20px;
            border-radius: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f5f5f5;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .form-group button:hover {
            background-color: #555;
        }
        .actions {
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 10px;
            margin: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .actions button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .actions button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <h1>订单管理</h1>
    <div class="menu">
        <a href="admin">管理员主页</a>
        <a href="adminproductcategories">商品类型管理</a>
        <a href="adminproduct">商品管理</a>
        <a href="adminusers">用户管理</a>
        <a href="login1">登出</a>
    </div>
</div>

<div class="content">
    <h2>订单管理</h2>
    <div class="actions">
        <div class="form-group">
            <label for="orderNo">查询订单:</label>
            <input type="text" id="orderNo" placeholder="请输入订单号">
            <div class="button-group">
                <button onclick="searchOrder()">查询</button>
                <button onclick="showOrderList()">订单列表</button>
            </div>
        </div>
    </div>
    <div id="moduleContent"></div>
</div>

<script>
    window.onload = function() {
        showOrderList();
    };

    function getStatusText(status) {
        switch(status) {
            case 1:
                return '未付款';
            case 2:
                return '已付款';
            case 3:
                return '已发货';
            case 4:
                return '已取消';
            default:
                return '未知状态';
        }
    }

    function getTypeText(type) {
        switch (type) {
            case 1:
                return '在线支付';
            case 2:
                return '货到付款';
            default:
                return '未知类型';
        }
    }

    function showOrderList() {
        fetch('/orders')
            .then(response => response.json())
            .then(data => {
                let ordersHtml = '<h3>订单列表</h3><table><thead><tr><th>订单号</th><th>收货人</th><th>金额</th><th>状态</th><th>操作</th></tr></thead><tbody>';

                data.forEach(order => {
                    ordersHtml += `<tr>
                    <td>${order.orderNo}</td>
                    <td id="usernameColumn${order.orderNo}"></td>
                    <td>${order.amount}</td>
                    <td>${getStatusText(order.status)}</td>
                    <td>
                        <button onclick="viewOrderDetails('${order.orderNo}')">查看详情</button>
                    </td>
                </tr>`;

                    (function(orderNo, uid) {
                        fetch(`/users/${uid}`)
                            .then(response => response.json())
                            .then(user => {
                                document.getElementById(`usernameColumn${orderNo}`).textContent = user.name;
                            })
                            .catch(error => console.error('Error fetching user data:', error));
                    })(order.orderNo, order.uid);
                });

                ordersHtml += '</tbody></table>';
                document.getElementById('moduleContent').innerHTML = ordersHtml;
            })
            .catch(error => console.error('Error fetching orders:', error));
    }

    function searchOrder() {
        const orderNo = parseInt(document.getElementById('orderNo').value); // 将输入的值转换为整数
        if (!orderNo || isNaN(orderNo)) {
            alert('请输入有效的订单号');
            return;
        }

        fetch(`/orders/orderNo/${orderNo}`)
            .then(response => response.json())
            .then(order => {
                let ordersHtml = '<h3>订单列表</h3><table><thead><tr><th>订单号</th><th>收货人</th><th>金额</th><th>状态</th><th>操作</th></tr></thead><tbody>';

                ordersHtml += `<tr>
            <td>${order.orderNo}</td>
            <td id="usernameColumn${order.orderNo}"></td>
            <td>${order.amount}</td>
            <td>${getStatusText(order.status)}</td>
            <td>
                <button onclick="viewOrderDetails('${order.orderNo}')">查看详情</button>
            </td>
        </tr>`;

                (function(orderNo, uid) {
                    fetch(`/users/${uid}`)
                        .then(response => response.json())
                        .then(user => {
                            document.getElementById(`usernameColumn${orderNo}`).textContent = user.name;
                        })
                        .catch(error => console.error('Error fetching user data:', error));
                })(order.orderNo, order.uid);

                ordersHtml += '</tbody></table>';
                document.getElementById('moduleContent').innerHTML = ordersHtml;
            })
            .catch(error => console.error('Error fetching order details:', error));
    }


    function viewOrderDetails(orderNo) {
        console.log('Viewing details for orderNo:', orderNo);
        fetch(`/orders/${orderNo}`)
            .then(response => response.json())
            .then(orderDao => {
                let detailsHtml = `<h3>订单详情</h3>
                <p><strong>订单号:</strong> ${orderDao.order.orderNo}</p>
                <p><strong>收货人:</strong> <span id="usernameColumn${orderDao.order.uid}"></span></p>
                <p><strong>金额:</strong> ${orderDao.order.amount}</p>
                <p><strong>支付方式:</strong> ${getTypeText(orderDao.order.type)}</p>
                <p><strong>订单状态:</strong> ${getStatusText(orderDao.order.status)}</p>
                <h4>订单列表</h4>
                <table>
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>总价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>${orderDao.orderlist.goodsName}</td>
                            <td>${orderDao.orderlist.price}</td>
                            <td>${orderDao.orderlist.quantity}</td>
                            <td>${orderDao.orderlist.totalPrice}</td>
                        </tr>
                    </tbody>
                </table>`;
                document.getElementById('moduleContent').innerHTML = detailsHtml;

                fetch(`/users/${orderDao.order.uid}`)
                    .then(response => response.json())
                    .then(user => {
                        document.getElementById(`usernameColumn${orderDao.order.uid}`).textContent = user.name;
                    })
                    .catch(error => console.error('Error fetching user data:', error));
            })
            .catch(error => console.error('Error fetching order details:', error));
    }
</script>
</body>
</html>
